<template>
	<view class="wrap-options flex just-between">
		<view class="options-bg flex column just-between">
			<!-- 本地店铺 -->
			<view class="options-item" v-if="shopInfo" @click="$jump.to('/pages/business/list')">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(shopInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(shopInfo.img)" />
				
						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ shopInfo.title }}</view>
						</view>
					</view>
				</view>
				
				<view class="store-list flex just-between">
					<block v-for="(item, index) in shopInfo.list" :key="index">
						<view class="item">
							<image class="file" :src="$getImageURL(item.avatar)" />
							
							<view class="shop-name f-18">
								<text class="limit-num-line">{{ item.shopname }}</text>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<!-- 百焕商城 -->
			<view class="options-item" v-if="specialInfo" @click="$jump.to('/pages/product/list?type=goods&isDiscount=1')">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(specialInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(specialInfo.img)" />
				
						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ specialInfo.title }}</view>
						</view>
					</view>
				</view>
				
				<view class="goods-list">
					<view class="item flex column" v-if="specialInfo.list.length > 0">
						<image class="file" :src="$getImageURL(specialInfo.list[0].image)" />
						
						<view class="goods-name f-26 limit-num-line">{{ specialInfo.list[0].title }}</view>
						
						<view class="price f-30">{{ specialInfo.list[0].price }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="options-bg flex column just-between">
			<!-- 套餐卡券 -->
			<view class="options-item" v-if="travelInfo" @click="$jump.to('/pages/product/list?type=cardCoupon')">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(travelInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(travelInfo.img)" />
							
						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ travelInfo.title }}</view>
						</view>
					</view>
				</view>
				
				<view class="goods-list">
					<view class="item flex column" v-if="travelInfo.list.length > 0">
						<image class="file" :src="$getImageURL(travelInfo.list[0].image)" />
						
						<view class="goods-name f-26 limit-num-line">{{ travelInfo.list[0].title }}</view>
						
						<view class="price f-30">{{ travelInfo.list[0].price }}</view>
					</view>
				</view>
			</view>
			
			<!-- 本地优选 -->
			<view class="options-item" v-if="preferredInfo" @click="$jump.to('/pages/product/list?type=goods&isDiscount=2')">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(preferredInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(preferredInfo.img)" />
				
						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ preferredInfo.title }}</view>
						</view>
					</view>
				</view>
				
				<scroll-view scroll-x class="list">
					<block v-for="(item, index) in preferredInfo.list" :key="index">
						<view class="item">
							<image class="file" :src="$getImageURL(item.image)" />
						</view>
					</block>
				</scroll-view>
			</view>
			
			<!-- 积分抽奖 -->
			<view class="options-item" v-if="score_img !== ''" @click="onIntegral">
				<view class="integral-bg">
					<image class="img" mode="widthFix" :src="$getImageURL(score_img)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "options",
		props: {
			/**
			 * 特价套餐
			 */
			specialInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 商圈店铺
			 */
			shopInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 本地优选
			 */
			preferredInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 全单95折
			 */
			discountInfo: {
				type: Object,
				default: null
			},
			/**
			 * 康养
			 */
			travelInfo: {
				type: Object,
				default: null
			},
			/**
			 * 积分抽奖图片
			 */
			score_img: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
			};
		},
		methods: {
			/**
			 * 积分点击
			 */
			onIntegral() {
				uni.showModal({
					content: "功能正在研发中，敬请期待!~"
				})
				
				// this.$st.show("功能正在研发中，敬请期待!~");
			}
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-options {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		
		.options-bg {
			width: calc(50% - 10rpx);
			overflow: hidden;
			gap: 20rpx;
			
			.options-item {
				width: 100%;
				background-color: white;
				border-radius: 10rpx;
				overflow: hidden;
				
				.integral-bg {
					width: 100%;
					overflow: hidden;
					
					.img {
						width: 100%;
					}
				}
				
				.title-bg {
					width: 100%;
					height: 70rpx;
					padding: 18rpx 18rpx 0rpx;
					overflow: hidden;
					box-sizing: border-box;
				
					.title-img {
						width: auto;
						height: 26rpx;
					}
				
					.desc-bg {
						margin-left: 9rpx;
						flex: 1;
						overflow: hidden;
				
						.desc {
							--limit-num: 1;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							width: fit-content;
							max-width: 100%;
							overflow: hidden;
							background-color: $theme-color;
							color: $bg-text-color;
							border-radius: 10rpx;
							padding: 0 6rpx;
							box-sizing: border-box;
						}
					}
				}
				
				.store-list {
					margin-top: -10rpx;
					width: 100%;
					min-height: 320rpx;
					flex-wrap: wrap;
					padding: 0 20rpx 20rpx;
					box-sizing: border-box;
					
					.item {
						width: 145rpx;
						height: 145rpx;
						overflow: hidden;
						margin-top: 15rpx;
						position: relative;
						
						.file {
							width: 100%;
							height: 100%;
							overflow: hidden;
						}
						
						.shop-name {
							--limit-num: 1;
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							padding: 9rpx 6rpx;
							box-sizing: border-box;
							overflow: hidden;
							color: white;
							background-color: rgba(0, 0, 0, 0.2);
						}
					}
				}
				
				.goods-list {
					width: 100%;
					padding: 0rpx 20rpx 20rpx;
					box-sizing: border-box;
					
					.item {
						width: 100%;
						height: 100%;
						overflow: hidden;
						gap: 10rpx;
						
						.file {
							width: 295rpx;
							height: 295rpx;
						}
						
						.goods-name {
							--limit-num: 1;
							color: #121212;
						}
						
						.price {
							color: $theme-color;
						}
					}
					
				}
				
				
				.list {
					width: 100%;
					height: 150rpx;
					overflow: hidden;
					white-space: nowrap;
				
					.item {
						display: inline-block;
						width: 120rpx;
						height: 120rpx;
						margin-left: 14rpx;
						position: relative;
				
						&:last-child {
							margin-right: 14rpx;
						}
				
						.file {
							width: 120rpx;
							height: 120rpx;
						}
				
						.name {
							--limit-num: 1;
							position: absolute;
							left: 6rpx;
							bottom: 9rpx;
							right: 6rpx;
							overflow: hidden;
							color: white;
						}
					}
				}
			}
			
		}

		
	}
</style>
